<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="./css/mui.min.css" rel="stylesheet" />
		<link href="./css/mui.indexedlist.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				overflow: hidden;
			}

			.mui-bar {
				-webkit-box-shadow: none;
				box-shadow: none;
			}

			.mui-indexed-list-group {
				display: none;
			}
		</style>

		<script src="./js/mui.min.js"></script>
		<script src="./js/mui.indexedlist.js"></script>
		<script src="./utils/myRequest.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.ready(function() {
				var header = document.querySelector('header.mui-bar');
				var list = document.getElementById('list');
				//calc hieght
				list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				//create
				window.indexedList = new mui.IndexedList(list);

			});

			mui.plusReady(function() {
				var user = store.getItem();
				request.ajax({
					url: "/websocket/t-friend/allFriend",
					data: {
						id: user.id
					},
					type: "post",
					success: function(resp) {
						// console.log(typeof resp);
						if (resp.code == 20000) {
							var friendAll = resp.data.list;
							// console.log(friendAll.length);
							for (var i = 0; i < friendAll.length; i++) {
								//获取用户对象
								var users = friendAll[i].tuser;
								// console.log(JSON.stringify(users));
								// //获取用户的拼音
								var pinying = users.pingying;
								// //截取用户拼音的首字母
								var index = pinying.substring(0, 1);
								console.log(index);
								// plus.nativeUI.toast(index);
								// console.log(index);
								//获取每一个list对象
								var list = document.getElementById("py_" + index);
								if (list) {
									// console.log(index);
									list.style.display = "block";

										var html = "";

										html += "<li nickname=\""+friendAll[i].tuser.nickname+"\" img=\""+friendAll[i].tuser.minHeand+"\" id=\""+users.id+"\" name = \""+friendAll[i].remark+"\" class=\"mui-table-view-cell mui-media\">\n";
										html += "<a href=\"javascript:;\">\n";
										html += "<img class=\"mui-media-object mui-pull-left\" style=\"border-radius: 50%;\" src=\"" + friendAll[i].tuser.minHeand + "\">\n";
										html += "<div class=\"mui-media-body\">\n";


										if(friendAll[i].remark != null){
											html += "<p class=\"mui-ellipsis\">"+friendAll[i].remark+"</p>\n";
										}else{
											html += "<p class=\"mui-ellipsis\">"+friendAll[i].tuser.username+"</p>\n";
										}

										html += "<p class=\"mui-ellipsis\">"+friendAll[i].tuser.nickname+"</p>\n";

										html += "</div>\n";
										html += "</a>\n";
										html += "</li>";
										list.insertAdjacentHTML("beforeend",html);
								}
							}
						}
					}
				});
				
				
				//进入个人中心页面
				mui(".mui-table-view .mui-indexed-list-group").on('tap','.mui-table-view-cell',function(){
					  //获取id
					 var id = this.getAttribute("id");
					 var remark = this.getAttribute("name");
					 var img = this.getAttribute("img");
					 var nickname = this.getAttribute("nickname");
					 // plus.nativeUI.toast(id + "=" + remark);
					 mui.openWindow({
					     url:'userDetail.html',
					     id:'userDetail.html',
					     extras:{
					       ids : id,
						   remark : remark,
						   img : img,
						   nickname : nickname
					     }
					 });
				}) 
				
			});
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">好友列表</h1>
		</header>
		<div class="mui-content">
			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索机场">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul class="mui-table-view">
						<li id="py_a" data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
						<!-- 	<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">阿克苏机场</li>
						<li data-value="BPL" data-tags="ALaShanKou" class="mui-table-view-cell mui-indexed-list-item">阿拉山口机场</li>
						<li data-value="AAT" data-tags="ALeTai" class="mui-table-view-cell mui-indexed-list-item">阿勒泰机场</li>
						<li data-value="NGQ" data-tags="ALiKunSha" class="mui-table-view-cell mui-indexed-list-item">阿里昆莎机场</li>
						<li data-value="AQG" data-tags="AnQingTianZhuShan" class="mui-table-view-cell mui-indexed-list-item">安庆天柱山机场</li>
						<li data-value="MFM" data-tags="AoMenGuoJi" class="mui-table-view-cell mui-indexed-list-item">澳门国际机场</li>
 -->
						<!-- 
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" style="border-radius: 50%;" src="./img/tou.jpg">
								<div class="mui-media-body">
									<p>用户名</p>
									<p class="mui-ellipsis">昵称</p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" style="border-radius: 50%;" src="./img/tou.jpg">
								<div class="mui-media-body">
									<p>用户名</p>
									<p class="mui-ellipsis">昵称</p>
								</div>
							</a>
						</li> -->

						<li id="py_b" data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
						<li id="py_c" data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
						<li id="py_d" data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
						<li id="py_e" data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
						<li id="py_f" data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
						<li id="py_g" data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
						<li id="py_h" data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
						<li id="py_j" data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
						<li id="py_k" data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
						<li id="py_l" data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
						<li id="py_m" data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
						<li id="py_n" data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
						<li id="py_p" data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
						<li id="py_q" data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
						<li id="py_r" data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
						<li id="py_s" data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
						<li id="py_t" data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>
						<li id="py_w" data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
						<li id="py_x" data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
						<li id="py_y" data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
						<li id="py_z" data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>
					</ul>
				</div>
			</div>
		</div>
	</body>

</html>
